<template>
  <div class="container">

    <div class="auto">
      <div class="rule_wrap">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" style="marginBottom: 10px;">
         <a-card title="筛选框" hoverable>
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24" style="margin-bottom: 20px;">

                <a-col :span="5">
                  <a-form-item label="排序">
                    <a-select placeholder="请选择排序顺序" v-model="queryParam.sort" style="width: 150px;">
                      <a-select-option value="1">名称排序</a-select-option>
                      <a-select-option value="2">更新时间排序</a-select-option>
                      <a-select-option value="3">创建时间排序</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="9">
                  <a-form-item label="发布时间">
                    <a-range-picker v-model="queryParam.time"
                      format="YYYY-MM-DD HH:mm:ss"
                      :placeholder="['开始时间', '结束时间']"
                      @change="dataChange" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="关键词">
                    <a-input placeholder="请输入关键词" v-model="queryParam.keywords"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <a-button type="primary" @click="searchReset1" icon="reload" style="margin-left: 8px">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </a-card>

        </div>

        <!-- table区域-begin -->
        <a-card hoverable>
          <a-row style="margin-bottom: 20px;">
            <a-col :span="5">
              <a-button type="primary" @click="handleEditLink" v-if="isShowBtnPersson()">新建链接</a-button>
              <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                  <a-menu-item key="1" @click="batchDel" v-if="isShowBtnPersson()"><a-icon type="delete"/>删除</a-menu-item>
                  <!-- <a-menu-item key="2" @click="batchDown"><a-icon type="download"/>下载</a-menu-item> -->
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
              </a-dropdown>
            </a-col>
          </a-row>
          <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
              <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
              <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
              @change="handleTableChange">

              <template slot="addressImg" slot-scope="text, record">
                <img style="width: 200px; height: 79px;" :src="record.imgUrl" :alt="record.name">
              </template>

              <span slot="action" slot-scope="text, record">
                <a style="color: #1890ff" @click="editData(record)" v-if="isShowBtnPersson()">编辑</a>
                <a-divider type="vertical" v-if="isShowBtnPersson()"/>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"  v-if="isShowBtnPersson()">
                  <a style="color: #1890ff">删除</a>
                </a-popconfirm>
              </span>
            </a-table>
          </div>
        </a-card>
      </div>
    </div>
    <EditLink v-if="isShowBtnPersson()" ref="EditLink" @ok="searchQuery"></EditLink>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from  "@/store/mutation-types"
import EditLink from './modules/EditLink'
import '../../../public/css/style.css'
import { postAction, getAction } from '@/api/manage'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import BASE_URL from '../../../config'
import { isShowBtn } from "@/utils/authFilter"
export default {
  name: 'linkTotal',
  mixins: [JeecgListMixin],
  components: {
    EditLink
  },
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data() {
    return {
      birthdayRange: null,
      url: {
        list: '/linkurl/list',
        delete: '/linkurl/delete',
        deleteBatch: '/linkurl/delete'
      },
      queryParam: {},
      contractList: [],
      columns: [
          {
            title: '名称',
            align: "center",
            dataIndex: 'title'
          },
          {
            title: '顺序',
            align: "center",
            dataIndex: 'seq'
          },
          {
            title: '链接地址',
            align: "center",
            dataIndex: 'linkUrl'
          },
          // {
          //   title: '链接图片',
          //   align: "center",
          //   dataIndex: 'imgUrl',
          //   scopedSlots: {customRender: "addressImg"}
          // },
          {
            title: '发布时间',
            align: "center",
            dataIndex: 'createDate'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            width: 100,
            scopedSlots: {customRender: 'action'},
          }
      ]
    }
  },
  methods: {
    isShowBtnPersson() {
      return isShowBtn()
    },
    batchDown() {
      let url = BASE_URL + '/download/zipDownload?ids=' + this.selectedRowKeys.join(',')
      window.open(url)
    },
    searchReset1() {
      this.birthdayRange = null
      this.searchReset()
    },
    // searchReset() {
    //   this.queryParam = {}
    //
    //   this.search()
    //
    // },
    search() {
      debugger
      if (!this.queryParam.begintime) {
        delete this.queryParam.begintime
      }
      if (!this.queryParam.endtime) {
        delete this.queryParam.endtime
      }
      if (!this.queryParam.keywords) {
        delete this.queryParam.keywords
      }
      this.getArticleList()
    },

    dataChange(value, dateString) {
      this.queryParam.begintime=dateString[0]
      this.queryParam.endtime=dateString[1]
    },
    handleEditLink() {
      this.$refs.EditLink.add()
      this.$refs.EditLink.title = '新增链接'
    },
    goBack() {
      this.$router.go(-1)
    },
    handleDelete: function (id) {
      if(!this.url.delete){
        this.$message.error("请设置url.delete属性!")
        return
      }
      var that = this;
      postAction(that.url.delete, {ids: id}).then((res) => {
        if (res.code == 0) {
          that.$message.success(res.msg);
          that.searchQuery();
        } else {
          that.$message.warning(res.msg);
        }
      });
    },
    downLoadFile(record) {
      // window.open(record.fileurl)
      // let url = BASE_URL + '/download/downFile?filename=' + record.filename + '&fileurl=' + record.fileurl + '&token=' + Vue.ls.get(ACCESS_TOKEN)
      let url = BASE_URL + '/download/downFile/' + record.id
      window.open(url)
    },
    editData(record) {
      this.$refs.EditLink.edit(record)
      this.$refs.EditLink.title = '编辑'
    }
  }
}
</script>

